<template>
  <div class="page_wrap">
    <!-- 上半部分 -->
    <div class="upper_box">
      <div class="content">
        <div class="h_icon_box">
          <div class="icon" @click="toPage('message')"><img src="../../assets/images/userCenter/nav_icon_message_normal@2x.png" alt /></div>
          <div class="icon" @click="toPage('setting')"><img src="../../assets/images/userCenter/user_btn_setting_normal@2x.png" alt /></div>
        </div>
        <div class="row1 uesr_msg">
          <div class="pic" @click="$router.push('user')"><img src="../../assets/images/public/portraits.jpg" alt /></div>
          <span @click="$router.push('user')">起个名字都这么难</span>
        </div>
        <div class="row2">
          <section>
            <div class="s_left"><img src="../../assets/images/userCenter/user_icon_coupons2_green@2x.png" alt /></div>
            <div class="s_right">
              <span>优惠券</span>
              <b>99</b>
            </div>
          </section>
          <em></em>
          <section>
            <div class="s_left"><img src="../../assets/images/userCenter/user_icon_point2_green@2x.png" alt /></div>
            <div class="s_right">
              <span>积分</span>
              <b>955,55</b>
            </div>
          </section>
        </div>
      </div>
    </div>

    <!-- main -->
    <div class="main">
      <!-- 订单 -->
      <ul>
        <li class="all_order" @click="toPage('order', 0)">
          <div class="li_left">
            <img src="../../assets/images/userCenter/comfirmoder_icon_oder_default.png" alt />
            <span>全部订单</span>
          </div>
          <div class="li_right"><span>View All</span></div>
        </li>
        <li @click="toPage('order', 1)">
          <div class="li_left"><span>待支付订单</span></div>
          <div class="li_right"><i class="iconfont iconarrowRight-fill"></i></div>
        </li>
        <li @click="toPage('order', 2)">
          <div class="li_left"><span>待付款订单</span></div>
          <div class="li_right"><i class="iconfont iconarrowRight-fill"></i></div>
        </li>
        <li @click="toPage('order', 3)">
          <div class="li_left"><span>待收货订单</span></div>
          <div class="li_right"><i class="iconfont iconarrowRight-fill"></i></div>
        </li>
        <li @click="toPage('order', 4)">
          <div class="li_left"><span>待评价订单</span></div>
          <div class="li_right"><i class="iconfont iconarrowRight-fill"></i></div>
        </li>
      </ul>
      <!-- 其他 -->
      <ul>
        <li @click="toPage('collect')">
          <div class="li_left">
            <img src="../../assets/images/userCenter/user_icon_like_default@2x.png" alt />
            <span>我的收藏</span>
          </div>
          <div class="li_right"><i class="iconfont iconarrowRight-fill"></i></div>
        </li>
        <li @click="toPage('consult')">
          <div class="li_left">
            <img src="../../assets/images/userCenter/user_icon_consult_default@2x.png" alt />
            <span>我的咨询</span>
          </div>
          <div class="li_right"><i class="iconfont iconarrowRight-fill"></i></div>
        </li>
        <li @click="toPage('history')">
          <div class="li_left">
            <img src="../../assets/images/userCenter/user_icon_history_default@2x.png" alt />
            <span>浏览历史</span>
          </div>
          <div class="li_right"><i class="iconfont iconarrowRight-fill"></i></div>
        </li>
        <li @click="toPage('addr')">
          <div class="li_left">
            <img src="../../assets/images/userCenter/prodetails_icon_shipping_normal.png" alt />
            <span>我的地址</span>
          </div>
          <div class="li_right"><i class="iconfont iconarrowRight-fill"></i></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  data() {
    return {};
  },
  watch: {},
  computed: {},
  components: {},
  beforeRouteEnter(to, from, next) {
    next();
  },
  beforeRouteLeave(to, from, next) {
    next();
  },
  activated() {},
  deactivated() {},
  created() {
    // this.getUserList();
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      Toast.loading({
        duration: 1000,
        message: 'loading...',
        forbidClick: false
      });
    },
    async getUserList() {
      Toast.loading({
        duration: 5000,
        message: 'loading...',
        forbidClick: false
      });
      let url = '/userList';
      let data = {};
      let res = await this.$api('get', url, data);
      if (res.code == 200) {
        Toast.clear();
        console.log(res);
      } else {
        Toast({
          duration: 1500,
          message: res.message
        });
      }
    },
    toPage(page) {
      switch (page) {
        case 'message':
          this.$router.push({
            name: 'message'
          });
          break;
        case 'setting':
          this.$router.push({
            name: 'setting'
          });
          break;
        case 'order':
          this.$router.push({
            name: 'order'
          });
          break;
        case 'collect':
          this.$router.push({
            name: 'collect'
          });
          break;
        case 'consult':
          this.$router.push({
            name: 'consult'
          });
          break;
        case 'history':
          this.$router.push({
            name: 'history'
          });
          break;
        case 'addr':
          this.$router.push({
            name: 'addr'
          });
          break;
        default:
          break;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import '~@/assets/css/mixin';
.page_wrap {
  width: 100%;
  height: 100%;
  background: $bgc;
}

//上半部分
.upper_box {
  .content {
    background: $theme-color;
    padding: rem(30) rem(20);
    position: relative;
  }
  .h_icon_box {
    position: absolute;
    top: rem(20);
    right: rem(20);
    z-index: 1;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .icon {
      display: flex;
      justify-content: center;
      align-items: center;
      width: rem(40);
      height: rem(40);
      &:first-child {
        margin: 0 rem(30) 0 0;
      }
      img {
        width: 100%;
      }
    }
  }
  .row1 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .pic {
      width: rem(120);
      height: rem(120);
      margin: 0 rem(20) 0 0;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      overflow: hidden;
      background: #f8f8f8;
      img {
        width: 100%;
      }
    }
    span {
      font-size: rem(32);
      color: #fff;
    }
  }
  .row2 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: rem(40) 0 0 0;
    em {
      margin: 0 rem(80);
      width: rem(2);
      height: rem(50);
      background: #fff;
    }
    section {
      display: flex;
      justify-content: space-around;
      align-items: center;
      .s_left {
        margin: 0 rem(10) 0 0;
        img {
          width: rem(60);
        }
      }
      .s_right {
        span {
          display: block;
          font-size: rem(24);
          color: #fff;
        }
        b {
          display: block;
          font-size: rem(28);
          color: #fff;
          font-weight: bold;
        }
      }
    }
  }
}

//main
.main {
  padding: 0 0 rem(90) 0;
  .all_order {
    .li_right {
      span {
        color: $theme-color;
      }
    }
  }
  ul {
    margin: 0 0 rem(20) 0;
    li {
      height: rem(100);
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 rem(20);
      box-sizing: border-box;
      border-bottom: rem(1) solid #eee;
      &:last-child {
        border: none;
      }
      .li_left {
        display: flex;
        align-items: center;
        img {
          width: rem(40);
          margin: 0 rem(10) 0 0;
        }
        span {
          font-size: rem(28);
          color: $fc;
        }
      }
      .li_right {
        display: flex;
        align-items: center;
        span {
          font-size: rem(28);
          color: $fc;
        }
        i {
          font-size: rem(36);
          color: $fc;
        }
      }
    }
  }
}
</style>
